﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Navigation Actions</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 120px;
        }

        select {
            width: 200px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);

            sheet.setRowCount(20);
            sheet.setColumnCount(10);

            $("#preButton, #nextButton").click(function () {
                alert(this.value);
            });

            $("#tabAction, #shiftTabAction").change(function () {
                var id = this.id, isShift = id.indexOf("shift") === 0,
                    value = parseInt(this.value, 10),
                    actions = spreadNS.SpreadActions,
                    action;

                switch (value) {
                    case 0:
                        action = isShift ? actions.moveToPreviousCell : actions.moveToNextCell;
                        break;

                    case 1:
                        action = isShift ? actions.selectPreviousControl : actions.selectNextControl;
                        break;

                    case 2:
                        action = isShift ? actions.moveToPreviousCellThenControl : actions.moveToNextCellThenControl;
                        break;
                }

                if (action) {
                    sheet.addKeyMap(spreadNS.Key.tab, false, isShift, false, false, action);
                }
            });

            $("#nextControl, #preControl").change(function () {
                var id = this.id, isPre = id.indexOf("pre") === 0,
                    value = this.value,
                    control = value ? document.getElementById(value) : undefined;

                if (isPre) {
                    spread.previousControl(control);
                } else {
                    spread.nextControl(control);
                }
            });

            $("#hideSelection").click(function () {
                var spreadNS = GcSpread.Sheets;

                spread.hideSelection(this.checked);
            });
        };
        /*code_end*/
    </script>

</head>
<body class="demo-single">
    <div class="sample-turtorial">
        <div class="demo-options" style="margin-bottom: 10px;">
            <input type="text" id="preEdit" placeholder="Previous Edit" title="Candidate previous control" />
            <input type="button" id="preButton" title="Candidate previous control too" value="Previous Button" />
        </div>

        <div id="ss" style="width: 100%; height: 320px; border: 1px solid gray;"></div>

        <div class="demo-options">
            <input type="text" id="nextEdit" placeholder="Next Edit" title="Candidate next control" />
            <input type="button" id="nextButton" title="Candidate next control too" value="Next Button" />
        </div>

        <div class="demo-options">
            <div class="option-row">
                <label>Tab for:</label>
                <select id="tabAction">
                    <option value="0" selected="selected">Next cell</option>
                    <option value="1">Next control</option>
                    <option value="2">Next cell then control</option>
                </select>
            </div>
            <div class="option-row">
                <label>Shift + Tab for:</label>
                <select id="shiftTabAction">
                    <option value="0" selected="selected">Previous cell</option>
                    <option value="1">Previous control</option>
                    <option value="2">Previous cell then control</option>
                </select>
            </div>
            <div class="option-row">
                <label>Next control:</label>
                <select id="nextControl">
                    <option value="" selected="selected">Not set (auto detect)</option>
                    <option value="nextEdit">Next Edit</option>
                    <option value="nextButton">Next Button</option>
                </select>
            </div>
            <div class="option-row">
                <label>Previous control:</label>
                <select id="preControl">
                    <option value="" selected="selected">Not set (auto detect)</option>
                    <option value="preEdit">Previous Edit</option>
                    <option value="preButton">Previous Button</option>
                </select>
            </div>

            <div class="option-row">
                <input type="checkbox" id="hideSelection" />
                <label for="hideSelection">Hide Selection</label>
            </div>
        </div>
    </div>
</body>
</html>